<template>
  <div class="condition">
    <!-- 搜索框 -->
    <div class="search">
      <el-input
        v-model="searchText"
        @input="onSearchChange"
        placeholder="搜索条件..."
        class="search-input">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>

    <!-- 条件列表 -->
    <div class="condition-list">
      <ConditionItemVue
        v-for="item in localConditionList"
        :key="item.value"
        :name="item.name"
        :list="item.list"
        @change-condition="handler"
        :multi="item.multi"
        :show-no-limit="item.showNoLimit"
        v-model="modelValue[item.value]"
      />
    </div>

    <div class="toolbar">
      <slot name="toolbar"></slot>
    </div>
  </div>
</template>

<script>
import { Search } from '@element-plus/icons-vue'
import ConditionItemVue from './ConditionItem.vue'

export default {
  name: 'ConditionContainer',
  components: {
    ConditionItemVue,
    Search
  },
  props: {
    conditionList: {
      type: Array,
      required: true,
      default: () => []
    },
    modelValue: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  data() {
    return {
      searchText: this.modelValue.search || '',
      localConditionList: this.deepCopyConditionList()
    }
  },
  watch: {
    conditionList: {
      handler(newVal) {
        this.localConditionList = this.deepCopyConditionList(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    deepCopyConditionList(list = null) {
      return JSON.parse(JSON.stringify(list || this.conditionList))
    },

    handler(childCondition) {
      if (childCondition && typeof childCondition === 'object') {
        Object.assign(this.modelValue, childCondition)

        // 动态添加模块选择项
        this.handleDynamicModule(childCondition)
      }

      this.emitUpdate()
    },

    handleDynamicModule(childCondition) {
      const langItem = this.conditionList.find(item => item.value === 'langName')
      if (!langItem) return

      const selectedLang = langItem.list.find(lang => childCondition.langName === lang.name)
      if (selectedLang?.child) {
        // 移除旧的模块条件
        const updatedList = this.conditionList.filter(item => item.value !== 'module')
        // 添加新的模块条件
        updatedList.push(selectedLang.child)
        this.$emit('update:conditionList', updatedList)
      }
    },

    onSearchChange() {
      this.modelValue.search = this.searchText
      this.emitUpdate()
    },

    emitUpdate() {
      this.$emit('update:modelValue', { ...this.modelValue })
      this.$emit('change-condition', { ...this.modelValue })
    }
  }
}
</script>


<style scoped>
.condition {
  width: 100%;
  padding: 24px;
}

.search {
  margin-bottom: 24px;
}

.search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 10px;
  color: white;
  transition: background 0.3s ease, border 0.3s ease;
}

.search-input:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: #7a9dff;
  outline: none;
}

.condition-list {
  margin-bottom: 24px;
}

.toolbar {
  display: flex;
  justify-content: flex-end;
}
</style>